import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import ContentBox from 'components/contentBox'
import Filters from 'components/common/filters'
import Authorized from 'components/common/authorized'
import CustomTable from 'components/common/table'
import { Form, message } from 'antd'
import { widgetType, SCENE_TYPE } from 'constants'
import PropTypes from 'prop-types'
import Style from './recycle.css'

class RecycleForm extends Component {
  static propTypes = {
    form: PropTypes.object,
    getRecycleList: PropTypes.func,
    sceneRecycleData: PropTypes.object,
    restoreReply: PropTypes.func,
    restoreRequest: PropTypes.any
  }
  constructor (props) {
    super(props)
    this.state = {
      pageNo: 1,
      pageSize: 20,
      params: {}
    }
    this.search = this.search.bind(this)
    this.reset = this.reset.bind(this)
    this.onPageChange = this.onPageChange.bind(this)
    this.onShowSizeChange = this.onShowSizeChange.bind(this)
  }

  getFilterCols () {
    return [
      {
        label: '场景编号',
        id: 'queryNo',
        widget: widgetType.input,
        placeholder: '请输入场景编号'
      }, {
        label: '场景名称',
        id: 'queryName',
        widget: widgetType.input,
        placeholder: '请输入场景名称'
      }, {
        label: '场景分类',
        id: 'categoryCode',
        widget: widgetType.select,
        placeholder: '请选择分类',
        options: [
          {
            value: 'HUMAN_SPACE',
            text: '人文空间'
          },
          {
            value: 'FAMILY_SPACE',
            text: '家居室内'
          },
          {
            value: 'BIZ_SPACE',
            text: '商业空间'
          },
          {
            value: 'COMMON_SPACE',
            text: '公共空间'
          }, {
            text: '展馆空间',
            value: 'PAVILION_SPACE'
          }, {
            text: '其他空间',
            value: 'OTHER_SPACE'
          }
        ]
      }
    ]
  }

  getTableCols () {
    return [
      {
        title: '编号',
        dataIndex: 'id',
        key: 'id',
        width: 100,
        sorter: (a, b) => a.id - b.id
      },
      {
        title: '场景名称',
        dataIndex: 'name',
        key: 'name',
        width: 100
      },
      {
        title: '场景图片',
        dataIndex: 'image',
        key: 'image',
        width: 100,
        render: text => <img className={Style['image']} src={text} />
      },
      {
        title: '场景类型',
        dataIndex: 'categoryCode',
        key: 'categoryCode',
        width: 100,
        render: (text) => SCENE_TYPE[text]
      },
      {
        title: '热区',
        dataIndex: 'tagIdList',
        key: 'tagIdList',
        width: 100,
        render: (text, record) => {
          if (record.tagIdList) {
            return record.tagIdList.length > 0 && record.tagIdList.map((item, index) => <div key={index}>{item}</div>)
          } else {
            return '-'
          }
        }
      },
      {
        title: '上线时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 100,
        sorter: (a, b) => a.createTime - b.createTime
      },
      {
        title: '删除时间',
        dataIndex: 'updateTime',
        key: 'updateTime',
        width: 100,
        sorter: (a, b) => a.updateTime - b.updateTime
      },
      {
        title: '操作',
        dataIndex: 'a',
        key: 'a',
        render: (text, record) => {
          return <>
            <Authorized auth='SCENE:RECYCLE:UNDO'>
              <a className={Style['a-btn']} onClick={() => this.handleRestore(record.id)}>还原</a>
            </Authorized>
          </>
        },
        width: 100
      }
    ]
  }

  reset () {
    this.setState({
      pageNo: 1,
      pageSize: 20,
      params: {}
    })
    this.props.getRecycleList({
      pageNo: 1,
      pageSize: 20
    })
  }
  search (values = {}) {
    const { pageSize, pageNo } = this.state
    values.pageNo = pageNo
    values.pageSize = pageSize
    this.setState({
      params: values
    })
    this.props.getRecycleList(values)
  }

  onPageChange (pageNo, pageSize) {
    const { params } = this.state
    params.pageNo = pageNo
    params.pageSize = pageSize
    this.setState({
      pageNo
    })
    this.props.getRecycleList(params)
  }

  onShowSizeChange (current, pageSize) {
    this.setState({
      pageSize
    })
    const { params } = this.state
    params.pageNo = current
    params.pageSize = pageSize
    this.props.getRecycleList(params)
  }

  handleRestore (id) {
    this.props.restoreReply({
      sceneId: id
    })
  }

  componentDidMount () {
    const { pageSize, pageNo } = this.state
    this.props.getRecycleList({
      pageSize,
      pageNo
    })
  }

  componentWillReceiveProps (nextProps) {
    if (!this.props.restoreRequest && nextProps.restoreRequest) {
      message.success('还原成功')
      this.search()
    }
  }

  render () {
    const { pageNo, pageSize } = this.state
    const { form, sceneRecycleData } = this.props
    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: sceneRecycleData && sceneRecycleData.total,
      onChange: this.onPageChange,
      pageSize,
      onShowSizeChange: this.onShowSizeChange

    }
    return (
      <>
        <ContentBox>
          <div className={Style['scenes-RecycleForm']}>
            <Filters cols={this.getFilterCols()} form={form} search={this.search} reset={this.reset} />
            <CustomTable loading={!sceneRecycleData} columns={this.getTableCols()} dataSource={(sceneRecycleData && sceneRecycleData.sceneList) || []} pagination={pagination} />
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  sceneRecycleData: state.scene.sceneRecycleData,
  restoreRequest: state.scene.restoreRequest
})
const mapDispatch = dispatch => ({
  getRecycleList: dispatch.scene.getRecycleList,
  restoreReply: dispatch.scene.restoreReply
})

const Recycle = Form.create()(RecycleForm)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(Recycle)
)
